<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>账号设置-修改手机 - EasyBlog博客</title>
    <th:block th:replace="~{ fragment/common::common_head}" />
</head>
<body>

<!--导航-->
<div th:replace="~{fragment/nav :: navbar}"></div>


<!--中间内容-->
<div class="m-content-container">
    <div class="ui stackable grid">
        <div class="one wide column"></div>
        <!--左侧菜单栏-->
        <div th:replace="~{ fragment/account-setting-sidebar::sidebar}"></div>
        <!--博客内容-->
        <div class="twelve wide column">
            <div class="ui top attached segment stackable">
                <h3 class="m-margin-top m-margin-bottom m-margin-left" style="font-size: 20px !important;color: #3d3d3d !important;">修改手机</h3>
                <div class="ui divider"></div>
                <div class="m-margin-left-large">
                    <div id="phone" class="ui input m-margin-top" style="width: 62% !important;">
                        <span class="m-margin-top">输入新手机：</span>
                        <input id="new_phone" type="text"/>
                        <span id="error" class="m-margin-left m-margin-top"></span>
                    </div>
                    <br/>
                    <br/>
                    <div class="ui action  fluid input" style="width: 60% !important;">
                        <span class="m-margin-top">填写验证码：</span>
                        <input id="confirm_code" type="password" />
                        <button id="code_btn" class="ui blue disabled mini button">获取验证码</button>
                    </div>
                    <br/>

                    <br/>
                    <button id="firm_btn"  class="ui red tiny disabled button m-margin-left-middle">
                        下一步
                    </button>

                </div>
                <div style="padding-bottom: 12em !important;"></div>
            </div>
        </div>
    </div>
</div>
<div  class="ui small modal">
    <div class="header" id="msg_header">删除</div>
    <div id="msg" class="content">
    </div>
    <div class="actions">
        <div id="msg-btn" class="ui red button">知道了</div>
    </div>
</div>

<div style="height: 10em"></div>
<!--底部footer-->
<div th:replace="~{ fragment/common :: footbar}"></div>

</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="../../../static/js/easyblog.js" th:src="@{/static/js/easyblog.js}"></script>
<script type="text/javascript">
    $(document).ready(function () {
        let userId=$('#userId').val();
        showPageZoomWarning();
        toggleStatus();
        logOut();
    });
</script>
<!--控制按钮的禁用和可用状态-->
<script type="text/javascript">
    $("#new_phone").click(function () {
        function changePhone() {
            let new_phone=document.getElementById("new_phone").value;
            let len2=document.getElementById("confirm_code").value.length;
            if(isMobileNumber(new_phone)){
                $('#code_btn').removeClass("disabled");
                $('#error').html("");
                $('#phone').css("width","62%");
                if(len2!=0) {
                    $('#firm_btn').removeClass("disabled");
                    $('#firm_btn').css("background-color", "#ca0c16");
                    $('#firm_btn').css("color", "#ffffff");
                }
            }else{
                //手机号没填对就不让获得验证码
                $('#code_btn').addClass("disabled");
            }
            if(len2==0) {
                $('#firm_btn').addClass("disabled");
                $('#firm_btn').css("background-color", "#E0E1E2");
                $('#firm_btn').css("color", "#000000");
            }
        }
        setInterval(changePhone, 300);
    });

    function isMobileNumber(phone) {
        var flag = false;
        var message = "";
        var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-3]{1})|(15[4-9]{1})|(18[0-9]{1})|(199))+\d{8})$/;
        if (phone.length != 11) {
            message = "请输入11位手机号码！";
        } else if (!myreg.test(phone)) {
            message = "请输入有效的手机号码！";
        } else {
            flag = true;
        }
        if (message != "") {
            showInfoMessage(message);
        }
        return flag;
    }

</script>

<script>
    $('#msg-btn').click(function () {
        $('.ui.modal').modal('hide');
    });
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });
    $('.ui.dropdown').dropdown({
        on: 'hover'
    });
    $('#searchBar').click(function () {
        $('#reloadSearchBar').css("display", "block");  //显示div
    });
    $('#account2').css("background",'#ca0c16');
    $('#account2').css('color','#ffffff');
</script>
</html>